<template>
	<view id="idCard-hand-page">
		<view class="title">系统随机生成指定手势数字</view>
		<view class="random-number themeColor">{{param.randNum}}</view>
		<view class="tips">右手持身份证放置于胸前，左手做出指定手势数字</view>
		<view class="tips">点击下面的图片，进行上传。</view>
		<view class="handheld-card-box" @tap="changeHandheldImg">
			<image class="handheld-card-img" :src="param.idCardHand ? param.idCardHand : '../../static/img/handheld_card.png'"></image>
			
		</view>
		<button class="sumbit-btn" :loading="loading" :disabled="loading" @click="confirm">完成</button>
	</view>
</template>

<script>
	import qiniuUploader from '../../components/qiniu/qiniuUploader.js';
	import {
		apiUploadToken
	} from '../../../http/apis.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token'])
		},
		data(){
			return{
				param: {
					randNum: '',
					idCardHand: ''
				},
				uploadToken: '',
				imgHandleld: '',
				loading: false
			}
		},
		onShow() {
			
		},
		onLoad(option) {
			this.param.randNum = option.randNum
			apiUploadToken({}).then(res =>{
			    if(res.data.code == 1)  {
					this.uploadToken = res.data.msg
				}         
			}).catch(res => {
				this.$msg.showToast(res.data.msg)
			})
		},
		methods:{
			confirm(){
				if(!this.param.idCardHand){
					this.$msg.showToast('请先上传手持身份证')
					return
				}
				this.loading = true
				this.$eventHub.$emit('fire',this.param);
				uni.navigateBack({})
				this.loading = false
			},
			changeHandheldImg(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res)=>{
						this.imgHandleld = res.tempFilePaths[0]
						this.uploadImg(res,res.tempFiles[0].size > 1570000);
						
					}
				});
			},
			uploadImg(typeimg,fileSize){
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				var that = this;
				uni.getImageInfo({
					src:typeimg.tempFilePaths[0],
					success(res) {
						let canvasWidth = res.width //图片原始长宽
						let canvasHeight = res.height
						let img = new Image()
						img.src = res.path
						let canvas = document.createElement('canvas');
						let ctx = canvas.getContext('2d')
						let scale = res.height/res.width
						canvas.width = fileSize == true ? 500 : canvasWidth
						canvas.height = fileSize == true ? 500*scale : canvasHeight
						ctx.drawImage(img, 0, 0, fileSize == true ? 500 : canvasWidth , fileSize == true ? 500*scale : canvasHeight )//fileSize == true ? 300 : canvasHeight / 2
					
						canvas.toBlob(function(fileSrc) {
							let imgSrc = window.URL.createObjectURL(fileSrc)
							var random = Math.floor(Math.random() * (1000 - 1)) + 1
							var timestamp=new Date().getTime();
							var name=imgSrc.substring(imgSrc.lastIndexOf("-")+1);
							var key = name + random.toString() + timestamp.toString() + '.png'
							 qiniuUploader.upload(
							    imgSrc,
							    res => {
							        //图片上传完成后返回值
									uni.hideLoading()
									that.$msg.showToast('上传成功')
									that.param.idCardHand = res.imageURL;
									console.log(res.imageURL)
									
							    },
							    error => {
							        // resolve(error)
									uni.hideLoading()
									that.$msg.showToast('上传失败')
							    },
							    {
							        region: that.GLOBAL.REGION_VALUE, // （必须填写正确）ECN, SCN, NCN, NA, ASG，分别对应七牛的：华东，华南，华北，北美，新加坡 5 个区域
							        domain: that.GLOBAL.QINIU_URL, // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL                                         字  段。否则需要自己拼接
							        key: 'idCard/' + key, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
							        // 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
							        uptoken: that.uploadToken // 由其他程序生成七牛 uptoken
							    },
							    res => {
							         //上传进度
							        if(res.progress === 100){
										uni.hideLoading()
							        }
							    }
							);
						})
					}
				})
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}
	#idCard-hand-page {
		text-align: center;
		padding: 20upx;
		.title {
			font-size: 30upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 48upx;
		}
		.random-number {
			border: 1px dashed #E0E0E0;
			font-size: 80upx;
			display: inline-block;
			padding: 88upx 120upx;
			border-radius: 100%;
			margin: 20upx 0;
			color: $theme-color;
		}
		.tips {
			font-size: 30upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: $theme-color;
			line-height: 48upx;
		}
		.handheld-card-box {
			width: 100%;
			height: 380upx;
			border: 1px dashed #E0E0E0;
			border-radius: 10upx;
			margin: 40upx 0;
			.handheld-card-img {
				width: 100%;
				height: 100%;
				border-radius: 10upx;
			}
		}
		.sumbit-btn {
			margin: 32upx;
			height: 96upx;
			background: $theme-background-color;
			border-radius: 10upx;
			font-size: 32upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 96upx;
		}
	}
</style>

